'use client'
import { useEffect } from 'react'
import { AntdRegistry } from '@ant-design/nextjs-registry'
import { ConfigProvider } from 'antd'
import './style/globals.css'
import './style/animation.css'
import './style/antTheme.css'

const token = {
  // 主色调，用于强调和突出重要元素
  colorPrimary: '#f7f7f7', // 橙色，用于按钮、链接等
  // 背景色，用于页面和容器的背景
  colorBg: '#edebeb', // 深灰色，作为基础背景色
  // 次要文本颜色，用于辅助文本
  colorTextSecondary: '#8A8A8A', // 更深的灰色，用于次要信息
  // 边框颜色，用于组件边框
  colorBorder: '#282C34', // 深灰色边框
  // 阴影颜色，用于组件的阴影效果
  colorShadow: 'rgba(0, 0, 0, 0.3)', // 带有透明度的黑色阴影
  // 字体大小
  fontSizeBase: '14px', // 基础字体大小
  // 边框圆角
  borderRadius: '6px', // 组件的边框圆角
  // 悬停和选中状态的颜色
  colorHover: '#FF6600',
  colorActive: '#f7f7f7',
  // 链接颜色
  colorLink: '#FF6600',
}

const rAF = () => {
  return (
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    function (cb) {
      window.setTimeout(rAF(cb), 1000 / 60)
    }
  )
}

export default function RootLayout({ children }) {
  useEffect(() => {
    // 确保DOM已经加载
    const htmlElement = document.documentElement
    // 添加"dark"类到html元素
    htmlElement.classList.add('dark')
    // 组件卸载时移除"dark"类
    return () => {
      htmlElement.classList.remove('dark')
    }
  }, [])
  return (
    <html className="min-w-[100%]">
      <body className="min-w-[100%] bg-main">
        <div className="navigation-bar">Fps: 132</div>
        <AntdRegistry>
          <ConfigProvider theme={{ token: { ...token } }}>{children}</ConfigProvider>
        </AntdRegistry>
      </body>
    </html>
  )
}
